<template>
  <div style="width: 1400px">
    <el-container>
      <!-- 头部 -->
      <el-container>
        <el-row class="head">
          <el-col class="shouyintai">就爱Shop收银台</el-col>
        </el-row>
      </el-container>
      <!-- 间隔 -->
      <el-header class="header1"></el-header>
      <!-- 订单详情 -->
      <el-form :inline="true" :model="formInline" class="xq">
        <p>订单提交成功，请尽快付款！订单号：{{id}}</p>
        <span class="Payment">应付款{{Num}}元</span>
      </el-form>
      <!-- 支付方式 -->
      <el-row class="big">
        <el-col class="zhifu">支付方式如下:</el-col>
        <el-col class="zhifu1">
          <div class="fangfa" style="width: 800px">
            <el-row :gutter="20" class="b">
              <el-col :span="1">
                <el-radio v-model="radio" label="1" class="choice"
                  >微信支付</el-radio
                ></el-col
              >
              <el-col :span="6" class="a"
                ><div class="m">支付：￥{{Num}}</div></el-col
              >
            </el-row>
            <el-row :gutter="20" class="b">
              <el-col :span="1"
                ><el-radio v-model="radio" label="2" class="choice"
                  >支付宝支付</el-radio
                ></el-col
              >
              <el-col :span="6" class="a"
                ><div class="m">支付：￥{{Num}}</div></el-col
              >
            </el-row>
            <el-row :gutter="20" class="b">
              <el-col :span="1"
                ><div class="">
                  <el-radio v-model="radio" label="3" class="choice"
                    >银行卡支付</el-radio
                  >
                </div></el-col
              >
              <el-col :span="6" class="a"
                ><div class="m">支付：￥{{Num}}</div></el-col
              >
            </el-row>
            <el-row :gutter="20" class="b">
              <el-col :span="1"
                ><div class="">
                  <el-radio v-model="radio" label="4" class="choice"
                    >信用卡支付</el-radio
                  >
                </div></el-col
              >

              <el-col :span="6" class="a"
                ><div class="m">支付：￥{{Num}}</div></el-col
              >
            </el-row>
          </div>
        </el-col>
        <el-col class="zhifu2"
          ><el-button class="fu" @click="CheckOut">立即支付</el-button></el-col
        >
      </el-row>
    </el-container>

    <!-- 付款方式 -->
    <el-dialog
      title="微信支付"
      :visible.sync="dialogVisible"
      width="430px"
      :before-close="handleClose"
    >
      <div
        class="collectionCode1"
        style="width: 300px; height: 300px; margin-left: 45px"
      >
        <img src="../views/imgs/wechat.png" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="payment">付款</el-button>
      </span>
    </el-dialog>

    <!-- 付款方式 -->
    <el-dialog
      title="支付宝支付"
      :visible.sync="dialogVisible2"
      width="430px"
      :before-close="handleClose"
    >
      <div
        class="collectionCode1"
        style="width: 300px; height: 300px; margin-left: 45px"
      >
        <img src="../views/imgs/zhifubao.png" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="payment">付款</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="银行卡支付"
      :visible.sync="dialogVisible3"
      width="430px"
      :before-close="handleClose"
    >
      <div
        class="collectionCode"
        style="width: 300px; height: 300px; margin-left: 45px"
      >
        <img src="../views/imgs/logo.jpg" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="payment">付款</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="信用卡支付"
      :visible.sync="dialogVisible4"
      width="430px"
      :before-close="handleClose"
    >
      <div
        class="collectionCode1"
        style="width: 300px; height: 300px; margin-left: 45px"
      >
        <img src="../views/imgs/logo.jpg" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="payment">付款</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getorder ,putorder} from "../api/home";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      Num:"",
      id:"",
      radio: 0,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
    };
  },
  created() {
    this.id = this.$route.query.orderid; 
    console.log(this.$route.query);
    console.log(this.id);
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    CheckOut() {
      if (this.radio == 1) {
        this.dialogVisible = true;
      } else if (this.radio == 2) {
        this.dialogVisible2 = true;
      } else if (this.radio == 3) {
        this.dialogVisible3 = true;
      } else if (this.radio == 4) {
        this.dialogVisible4 = true;
      } else {
        this.$message.error("请选择支付方式！");
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    payment() {
      this.dialogVisible = false;
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
      this.dialogVisible4 = false;
      this.$message.success("支付成功！");
      putorder(this.id).then(data=>{
        console.log(data);
      })
    },
  },
  mounted(){
    getorder(this.id).then(data=>{
      console.log(data.data);
      this.Num=data.data.num;
    })
  }
};
</script>

<style scoped>
/* 头部 */
.head {
  height: 55px;
  width: 100%;
  background-color: whitesmoke;
}
.shouyintai {
  font-size: 25px;
  height: 35px;
  width: 200px !important;
  margin-left: 10px;
  margin-top: 10px;
}
.shouyintai1 {
  height: 35px;
  font-size: 20px;
  width: 85px !important;
  line-height: 1.7;
  margin-top: 10px;
}
.UserId {
  height: 35px;
  width: 100px !important;
  margin-left: 60%;
  margin-top: 10px;
  line-height: 2;
  text-align: center;
}
.dingdan {
  height: 35px;
  width: 100px !important;
  margin-left: 2%;
  margin-top: 10px;
  line-height: 2;
  text-align: center;
}
.wode {
  height: 35px;
  width: 100px !important;
  margin-left: 2%;
  margin-top: 10px;
  line-height: 2;
  text-align: center;
}
/* 交易明细 */
.header1 {
  height: 10px !important;
}
.first {
  height: 50px;
  background-color: pink;
}
/* .xiangqing {
  margin-left: 20px;
  margin-top: 2px;
  border: 1px solid rgba(0,0,0,1);
  width: 100px;
} */
/* 支付方式 */
.big {
  height: 500px;
  border: 1px solid rgba(0, 0, 0, 1);
}
.zhifu {
  font-size: 40px;
  margin-left: 10px;
  margin-top: 10px;
  width: 280px;
}
.zhifu1 {
  height: 300px;

  margin-top: 10px;
}
.zhifu2 {
  background-color: yellow;
  width: 123px;
  margin-left: 85%;
  margin-top: 20px;
}
.fu {
  width: 123px;
  border: 1px solid rgba(0, 0, 0, 1);
}
.c {
  height: 35px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-top: 2px;
}
.fangfa {
  margin-left: 100px;
  margin-top: 30px;
}
.b {
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 1);
  width: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.a {
  text-align: center;
  line-height: 2.5;
  margin-left: 100px;
}
.m {
  border: 1px solid rgba(0, 0, 0, 1);
  width: 600px;
}
.abc {
  margin-left: 50%;
}

.choice {
  margin-top: 16px;
}
img {
  width: 100%;
  height: 100%;
}
</style>